import React from 'react';
import { observer, inject } from 'mobx-react';
import {toJS} from 'mobx';
import { withRouter } from 'react-router-dom';
import {Tools,Icon,Flex, Modal} from 'weaver-mobile';
import { closest } from '../../util';

const getLabel = Tools.getLabel;
@inject('newStore', 'listStore')
@withRouter
@observer
export default class SendEnd extends React.Component {

  constructor(props) {
    super(props);
    this.isJump = false;
  }

  componentDidMount() {
    if (this.props.history.action === 'POP') {
      this.isJump = true;
      this.props.history.go(-1);
    }
  }

  componentWillUnmount(){
    const {newStore} = this.props;
    newStore.setState({viewLog: false, continueWrite: false});
  }

  render() {
    const {newStore, location: {state}, emailPageSearch} = this.props, sendEndStatus = toJS(newStore.sendEndStatus) || {},
      {status, isSend, isDraft, errorMess, timingsubmitType} = sendEndStatus;
    const { viewLog } = newStore;
    let sendSuccess = status === '1' && (isSend === 'true' || isSend === 'draftSaved');
    // let __errorHint = errorMess && errorMess.errorName !== '' ? errorMess.errorName : errorMess && errorMess.errorHint ? errorMess.errorHint : getLabel(501327, '邮件发送过程中出现异常,具体点击错误详情');
    let __errorHint = errorMess && errorMess.errorHint ? errorMess.errorHint : getLabel(501327, '邮件发送过程中出现异常,具体点击错误详情');
    const isShowOps = emailPageSearch.fromPage && emailPageSearch.fromPage === 'hrmCard'
    return this.isJump ? '' : (
      <div className="email-new-send-end wm-route-layout">
        <div className="send-end-png">
          <Icon type={sendSuccess ? 'mail-send-success' : 'mail-error'} />
          <div className={`send-end-msg ${sendSuccess ? 'send-success' : 'send-error'}`}>
            {sendSuccess && isDraft && getLabel(384403, '保存草稿成功')}
            {sendSuccess && timingsubmitType === 'submit' && getLabel('32402', '您的定时邮件保存成功')}
            {sendSuccess && timingsubmitType === 'submit' && <div className="send-end-view-log">{getLabel('501551','该邮件暂时保存在“草稿箱”中，它将在您指定的时间发出')}</div>}
            {sendSuccess && !isDraft && timingsubmitType !== 'submit' && getLabel(124904, '邮件发送成功')}
            {!sendSuccess && `${getLabel(71, '邮件')}${isDraft ? getLabel(30986, '保存') : getLabel(2083, '发送')}${getLabel(25009, '失败')}`}
          </div>

          {!sendSuccess &&
          <div className="send-end-view-log">
            <p>{getLabel('83106', '已保存到草稿箱')}</p>
            <p className='view-log-errormsg'>{__errorHint}</p>
            <p>{getLabel('501236', '查看')}<a onClick={() => newStore.setState({ viewLog: true })}>{getLabel(131885, '错误详情')}</a></p>
          </div>
          }
        </div>
        {
          !state.isFromWf && !isShowOps && (
            <Flex className={`send-end-oper ${!sendSuccess && 'haserror'}`}>
              <Flex.Item />
              <div className="oper-list">
                {sendSuccess ?
                  <a onClick={(e) => this.goList(e,'/inbox')}><Icon type='mailreturn' size="xs"/>{getLabel(384356, '返回收件箱')}
                  </a> :
                  <a onClick={(e) => this.goList(e,'/draft')}><Icon type='mailreturn' size="xs"/>{getLabel(501555, '返回草稿箱')}
                  </a>
                }
                <a onClick={(e) => this.goList(e, '/sent')} ><Icon type='blog-mail-o' size="xs" />{getLabel(384357, '查看已发送邮件')}</a>
                <a onClick={this.continueWriting}><Icon type='mail-write-letter' size="xs" />{getLabel(81406, '继续写信')}</a>
              </div>
              <Flex.Item />
            </Flex>
          )
        }
        <Modal
          transparent
          visible={viewLog}
          maskClosable={false}
          onClose={() => newStore.setState({ viewLog: false })}
          title={getLabel('17480', '查看日志')}
          className='email-error-modal'
          footer={[{
            text: getLabel('826', '确定'),
            onPress: () => newStore.setState({ viewLog: false })
          }]}
          wrapProps={{ onTouchStart: (e) => {
            // fix touch to scroll background page on iOS
            if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
              return;
            }
            const pNode = closest(e.target, '.am-modal-content');
            if (!pNode) {
              e.preventDefault();
            }
          }}}
        >
          <div className='send-end-errorlog'>
            <div className='send-end-errorlog-title'>{getLabel(24647, '错误提示')}</div>
            <div className='error_content' dangerouslySetInnerHTML={{__html: errorMess && errorMess.solution ? errorMess.solution : getLabel(384359, '未知错误，请联系管理员！')}}/>
            {
              errorMess && [
                <div className='send-end-errorlog-title'>{getLabel(82875, '错误日志')}</div>,
                <div className='error_content' style={{ color: 'red' }} dangerouslySetInnerHTML={{__html: errorMess && errorMess.errorString}}/>
              ]
            }
          </div>
        </Modal>
      </div>
    );
  }
  
  goList = (e, href) => {
    e.preventDefault();
    const {listStore} = this.props;
    listStore.onSearch({current: 1});
    this.isJump = true;
    this.props.history.push(href);
  }
  continueWriting = () => {
    const {newStore, setTitle} = this.props;
    newStore.clear(setTitle);
    newStore.setState({continueWrite: true})
    this.props.history.go(-1);
  }
}